import React, { Component } from 'react';
import { connect } from 'react-redux';
import { HashRouter as Router, Switch, Route, NavLink } from 'react-router-dom' ;
import {logout} from '../actions/login'
import {removeToCart} from '../actions/cart';
var _ = require('lodash');

class Header extends Component {
    constructor(props, context) {
        super(props);
        this.state = {
            login:false,
            username:"",
            carts:[]
        }
        this.logout = this.logout.bind(this);
        this.removeToCart = this.removeToCart.bind(this);
      }
      logout(){
        this.props.logout({login:false,username:""},()=>{
            this.props.history.push('/login');
        });
      }
      removeToCart(e,params){
        this.props.removeToCart(params);
      }

    render() {
        var jsx = "";
        var {carts} = this.props;
        carts = _.uniq(carts);
        if(!carts){
            return;
        }
        var num = carts.length||0;
        var totalPrice =0;
        carts && carts.map((item,i)=>{
            totalPrice += item.price*item.quantity;
        })
        var styleObj = {
            display: this.props.login ? 'block' : 'none',
        }
        var loginObj = {
            display: this.props.login  ? 'none' : 'block',
        }
        var username = this.props.username ;
        return (
            <div>
                                <div className="navbar-wrapper">
                                <div className="container">

                                    <nav className="navbar navbar-inverse navbar-static-top">
                                        <div className="container">
                                            <div className="hidden-xs navbar navbar-default navbar-fixed-top navbar-static-top" role="navigation">
                                                <div className="container" style={{paddingRight:'0px',paddingLeft:'0px'}}>
                                                    <div className="navbar-header">
                                                        <div className="navbar-brand">
                                <NavLink to="/">
                                                            <img alt="Pc" src="https://www.pantrysbest.com/system/ad_images/pc_images/000/000/010/original/PC.png?1519991628" style={{minWidth:'205px'}} />
                                    </NavLink>
                                                        </div>
                                                    </div>
                                                    <ul className="nav navbar-nav navbar-right pc-navbar-right hidden-xs">
                                                            <li id="sign-in-item" style={loginObj}><NavLink to="/login">登录</NavLink></li>
                                                            <li id="sign-in-item" style={styleObj}><a onClick={this.logout}><span>{username}</span>退出</a></li>
                                                            <li id="shopping-cart-summary-nav" className="box">
                                                                <NavLink to="/cart" >
                                                                <i className="fa fa-shopping-cart">购物车</i>
                                                                <span className="shopping-cart-items-count">{num}</span>
                                                                </NavLink>
                                                                <div className="cartBoxDiv" id="cartajaxDiv"><h4>最近加入的商品</h4>
                                                                <ul>
                                                                { carts.map((item,index)=>{
                                                                   return (  <li key={index}>
                                                                    <NavLink to={`/detail/${item._id}`} >
                                                                    <div className="cl"><img src={item.img}/></div>
                                                                    <div className="cc">{item.title}<br/></div>
                                                                    </NavLink>
                                                                    <div className="cr">
                                                                    ￥{item.price} x {item.quantity}<br/>
                                                                    <a href="javascript:;"  onClick={(e) => this.removeToCart(e,item)}>删除</a>
                                                                    </div>
                                                                    </li>
                                                                 ) }) }
                                                                </ul>
                                                                <div className="cartbottom">共<strong>{num}</strong>件商品 共计 <strong> ￥{totalPrice}</strong> 元<NavLink to="/cart" >去购物车</NavLink></div>
                                                                </div>
                                                            </li>
                                                    </ul>
                                                        
                                                                    
                                                </div>
                                        </div>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                    <div>
             </div>
            </div>
        );
    }
}

const getValue =state=>{
	return {
    login: state.loginReduce.login,
    username: state.loginReduce.username,
    carts: state.cartReduce.carts
  }
}

const HeaderContext = connect(getValue,{logout,removeToCart})(Header);

export default HeaderContext;
